<!--  -->
<template>
    <div class=''>
        <!--内容-->
        <div class="product-content">
            <div class="table-wrap">
                <el-table size="small" v-loading="loading" :data="tableData" border style="width: 100%" stripe>
                    <!-- <el-table-column prop="id" label="id" width="80"></el-table-column>
                    <el-table-column prop="userId" label="用户id" width="80"></el-table-column> -->
                    <el-table-column prop="orderNo" label="销售订单号" width="180" align="center">
                        <template #default="scope">
                            <a @click="orderNoToPage(scope.row)" href="javascript:;">{{ scope.row.orderNo }}</a>
                        </template>
                    </el-table-column>
                    <el-table-column prop="payOrderNo" label="支付订单号" width="180" align="center"></el-table-column>
                    <el-table-column prop="nickName" label="用户昵称" width="120" align="center"></el-table-column>
                    <el-table-column prop="extractName" label="提货人" width="80" align="center"></el-table-column>
                    <el-table-column prop="title" label="标题" align="center"></el-table-column>
                    <el-table-column prop="typeText" label="变动" align="center"></el-table-column>
                    <el-table-column prop="originalMoney" label="金额" width="100" align="center"></el-table-column>
                    <el-table-column prop="payTypeText" label="支付方式" align="center"></el-table-column>
                    <el-table-column prop="refundTypeText" v-if="tabType == 2" label="退款方式" align="center"></el-table-column>
                    <el-table-column prop="refundDesc" v-if="tabType == 2" label="退款原因" align="center"></el-table-column>
                    <!-- <el-table-column prop="remark" label="备注" width="300"></el-table-column> -->
                    <el-table-column prop="createTime" label="创建时间" align="center"></el-table-column>
                    <el-table-column prop="payStatusText" label="状态" align="center">
                        <template #default="scope">
                            <el-tag type="success">
                                {{ scope.row.payStatusText }}
                            </el-tag>
                        </template>
                    </el-table-column>
                </el-table>

            </div>
            <!--分页-->
            <div class="pagination" style="display: flex; justify-content: space-between;align-items: center;">
                <div>
                    <!-- total-总计汇总、pageTotal-小计汇总 -->
                    总计汇总：<span v-if="data.total">￥{{ data.total }}</span> &nbsp; 小计汇总：<span v-if="data.pageTotal">￥{{
                        data.pageTotal
                        }}</span>
                </div>
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage4" :page-sizes="[10, 50, 100, 500]" :page-size="searchForm.defaultPageSize" layout="total, sizes, prev, pager, next, jumper" :total="totalDataNumber"></el-pagination>
                <!-- <el-pagination :page-sizes="[8, 50, 100, 500]" @size-change="handleSizeChange"
                    @current-change="handleCurrentChange" :current-page="searchForm.pageIndex" :page-size="searchForm.defaultPageSize"
                    layout="total, prev, pager, next, jumper" :total="totalDataNumber"></el-pagination> -->
            </div>
        </div>
    </div>
</template>
<script>
import OrderApi from "@/api/order.js";
import { defaultPageSize } from '@/utils/table.js'
export default {
    name: '',
    props: {
        tabType: {
            type: Number,
            default: 0
        }
    },
    components: {},
    data() {
        return {
            totalDataNumber: 0,
            searchForm: {
                pageIndex: 1,
                pageSize: 10,
            },
            loading: false,
            tableData: [],
            data: {}
        };
    },
    computed: {},
    watch: {
        tabType: {
            immediate: true,
            handler(val) {
                this.searchForm.payStatus = val
                this.searchForm.pageIndex = 1
                this.getData()
            }
        }
    },
    methods: {
        orderNoToPage(row) {
            let self = this;
            let params = row.orderId;
            self.$router.push({
                path: "/order/order/Detail",
                query: {
                    id: params,
                    tk: 'view',
                    type: 'ZD'
                },
            });
        },
        handleCurrentChange(current) {
            this.searchForm.pageIndex = current
            this.getData()
        },
        handleSizeChange(size) {
            this.searchForm.pageSize = size
            this.getData()
        },
        getData() {
            const $this = this
            $this.loading = true
            OrderApi.getWaletList($this.searchForm, true)
                .then(result => {
                    const { data } = result
                    this.data = data;
                    $this.tableData = data.walletList.records
                    $this.totalDataNumber = data.walletList.total
                    $this.loading = false
                }).catch(error => {
                    $this.loading = false
                })
            //getWaletList
        },
        exportClick() {
            OrderApi.exportWalet(this.tabType)
                .then(res => {
                    const blob = new Blob([res], { type: 'application/vnd.ms-excel' })
                    const url = window.URL.createObjectURL(blob)
                    const a = document.createElement('a')
                    a.href = url
                    const fdate = new Date()
                    const perx = `${fdate.getFullYear()}-${fdate.getMonth() + 1}-${fdate.getDate()}`
                    a.download = perx + '账单列表.xlsx'
                    a.click()
                    setTimeout(() => {
                        a.remove()
                    }, 1000)
                })
        },
        onSearch(obj) {
            this.searchForm.pageIndex = 1
            this.searchForm = { ...this.searchForm, ...obj }
            this.getData()
        }
    },
    created() {
        this.getData()
    },
    mounted() {

    },
}
</script>
<style scoped></style>